<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/include::header">
</head>
<head>
    <link th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/plugins/autocompleter/jquery.autocompleter.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/plugins/datetimepicker/bootstrap-datetimepicker.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/plugins/pickList/pickList.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/plugins/bootstrap-table/extensions/editable/bootstrap-editable.css}" rel="stylesheet"/>

    <script th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.js}"></script>
    <script th:src="@{'/static/js/plugins/bootstrap-table/locale/bootstrap-table-'+${#locale.language}+'.min.js'}"></script>
    <script th:src="@{/static/js/plugins/autocompleter/jquery.autocompleter.min.js}"></script>
    <script th:src="@{/static/js/plugins/datetimepicker/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/static/js/plugins/datetimepicker/locale/bootstrap-datetimepicker.zh_CN.js}"></script>
    <script th:src="@{/static/js/plugins/validate/jquery.validate.min.js}"></script>
    <script th:src="@{'/static/js/plugins/validate/messages_'+${#locale.language}+'.min.js'}"></script>
    <script th:src="@{/static/js/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js}"></script>
    <script th:src="@{/static/js/plugins/bootstrap-table/extensions/export/tableExport.js}"></script>
    <script th:src="@{/static/js/plugins/bootstrap-table/extensions/export/libs/js-xlsx/xlsx.core.min.js}"></script>
    <script th:src="@{/static/js/plugins/bootstrap-table/extensions/export/libs/FileSaver/FileSaver.min.js}"></script>
    <script th:src="@{/static/js/plugins/pickList/pickList.js}"></script>
    <script th:src="@{/static/js/plugins/iCheck/icheck.min.js}"></script>
    <script th:src="@{/static/js/plugins/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js}"></script>
    <script th:src="@{/static/js/plugins/bootstrap-table/extensions/editable/bootstrap-editable.min.js}"></script>
    <style type="text/css">
        .table {
            table-layout: fixed;
        }
    </style>
    <script type="text/javascript">
        function paramsMatter(value, row, index) {
            var span = document.createElement('span');
            span.setAttribute('title', value);
            span.innerHTML = value;
            return span.outerHTML;
        }

        function formatTableUnit(value, row, index) {
            return {
                css: {
                    "white-space": 'nowrap',
                    "text-overflow": 'ellipsis',
                    "overflow": 'hidden'
                }
            }
        }
    </script>
</head>
<body class="gray-bg">

<div class="modal fade" id="ruleConfigList">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" th:text="#{sys.games.ruleConfig}">规则配置</h3>
            </div>
            <div class="modal-body">
                <div class="btn-group hidden-xs" id="ruleConfigToolbar">
                    <button type="button" class="btn btn-sm btn-info" onclick="addRuleConfig()">
                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>&nbsp;<span
                            th:text="#{sys.add}">添加</span>
                    </button>
                </div>
                <table class="table table-striped" id="ruleConfigTable">
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" th:text="#{sys.save}"
                        id="updateRuleConfig">保存
                </button>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    table = $("#table");
    $(function () {
        initTable();
        editRuleConfig("id"); //  修改表格时调用 根据具体情况写在不同的位置
    });
    function addRuleConfig() {
        var data = {};
        data["key"] = "";
        data["value"] = "";
        $("#ruleConfigTable").bootstrapTable("append", data);
    }

    function editRuleConfig(id) {
        $("#updateRuleConfig").unbind("click");
        $("#updateRuleConfig").click(function () {
            updateRuleConfig(id); //向后台传递数据
        });
        $("#ruleConfigTable").bootstrapTable("destroy");
        initRuleConfig(id);
        $("#ruleConfigList").modal("show");
    }
    //更新——Ajax：向后台传递数据
    function updateRuleConfig(id) {
        var v = false;
        var data = $("#ruleConfigTable").bootstrapTable("getData");
        console.log(data);
        // 传递之前自己可以先处理一下（js）
        gameAjax({
            url: "/control/matchConfig/ruleconfig",
            data: {
                ruleConfigList: JSON.stringify(data), //转为String , 后台接受用String类型
                id: id,
            },
            async: false,
            callback: function (data) {
                $("#ruleConfigList").modal("hide");
                if(data){
                    swal("修改成功", "", "success");
                }else{
                    swal("修改失败", "要修改的数据不存在~", "error");
                }
                table.bootstrapTable("refresh");
            }
        });
    }

    /**
     * 初始化/回显表格
     * @param id
     */
    function initRuleConfig(id) {
        var item = table.bootstrapTable("getRowByUniqueId", id);
        var exInfo = item.exInfo;
        let exInfoList = [];
        for(var key in exInfo){
            var te = {};
            te.key =  key;
            te.value = exInfo[key];

            exInfoList.push(te);
        }
        var data = exInfoList == null ? "" : exInfoList;
        $("#ruleConfigTable").bootstrapTable({
            data: data,
            idField: "key",
            uniqueId: "key",
            toolbar: "#ruleConfigToolbar",
            columns: [
                {
                    title: ['规则名称'],
                    field: "key",
                    align: "center",
                    editable: {
                        validate: function (value) {
                            if (value == "") {
                                return "不能为空";
                            }
                        }
                    }
                },
                {
                    title: ['规则值'],
                    field: "value",
                    align: "center",
                    editable: {
                        validate: function (value) {
                            if (value == "") {
                                return "不能为空";
                            }
                        }
                    }
                },
                {
                    field: "key",
                    title: [[#{sys.operate}]],
                    align: "center",
                    formatter: function (value, row, index) {
                        index + 1;
                        return [
                            '<a class="removeuid" href="javascript:void(0)" onclick="deleteRuleConfig(\'' + value + '\',\'' + id + '\')" title="Remove">',
                            '<i class="glyphicon glyphicon-remove"></i>',
                            '</a>'
                        ].join('');
                    },
                }
            ]
        });
    }

    /**
     * 删除一行数据
     * 根据每一行的唯一键来删除一行数据
     * @param rowNumber
     */
    function deleteRuleConfig(rowNumber) {
        $("#ruleConfigTable").bootstrapTable("removeByUniqueId", rowNumber);
    }

</script>
</html>